<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<%
    long currentTime = new Date().getTime();
%>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>方案详情</title>
    <link rel="stylesheet" href="${allServerPath}static/layui/layui/css/layui.css">
    <link rel="stylesheet" href="${allServerPath}static/layui/css/formSelects-v4.css">
    <link rel="stylesheet" href="${allServerPath}static/css/insureMessage.css?t=<%=currentTime%>" media="all">
</head>
<body>
<div class="layui-row showTop">
    <div class="layui-col-md3">
        <div class="scheme">
            <div class="schemeIcon">
                <div class="schemeIconTxt">${insurancePlan.brand}</div>
            </div>
            <div class="message">
                <p class="cost">${insurancePlan.planPrice}元</p>
                <p class="name">${insurancePlan.planName}</p>
                <ul class="mContent">
                    <c:forEach items="${insurancePlan.briefIntroductions}" var="item">
                        <li>
                            <span class="listStyle"></span>
                            <span class="listTit">${item}</span>
                        </li>
                    </c:forEach>
                </ul>
                <div class="mButton" name="mButton">马上投保</div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9 fenge">
        <div class="introduce">
            <div class="introduceTit">方案介绍：</div>
            <c:forEach items="${insurancePlan.introductions}" var="introduction" varStatus="s">
                <ul class="introduceCont">
                    <li>${s.index+1}.${introduction};</li>
                </ul>
            </c:forEach>
        </div>
        <div class="introduce">
            <div class="introduceTit">适用场景：</div>
            <c:forEach items="${insurancePlan.useScenes}" var="useScene" varStatus="vs">
                <ul class="introduceCont">
                    <li>${vs.index+1}.${useScene};</li>
                </ul>
            </c:forEach>
        </div>
        <div hidden="hidden" id="id">${insurancePlan.id}</div>
    </div>
</div>
<div class="layui-row showtop">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">投保须知</li>
            <li>理赔流程</li>
            <%--<li>购前必读</li>--%>
            <li>常见问题</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">${insurancePlan.instructions}</div>
            <div class="layui-tab-item">${insurancePlan.claimProcess}</div>
            <%--<div class="layui-tab-item">${insurancePlan.requiredReading}</div>--%>
            <div class="layui-tab-item">${insurancePlan.faq}</div>
        </div>
    </div>
</div>
<script src="${allServerPath}static/layui/layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery'],function(){
        var $ = layui.jquery
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

        $("div[name='mButton']").click(function () {
            var id = $("#id").text();
            parent.window.tab.tabAdd({
                'id': '1-3',
                'title': '保险购买',
                'icon': '',
                'url': '${allServerPath}web/router/buyInsurance/' + id + '.htmls'//data.id
            });
        });

    });
</script>
</body>
</html>
